<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语雀</title>
    <link href="css/style.css" rel="stylesheet">
    <link href="http://at.alicdn.com/t/font_2161470_7zpm6d2qjvu.css" rel="stylesheet">
</head>
<body>
    <div class="header">
        <div class="nav">
            <img src="images/yuquelogo.png">
            <div class="search">
                <button><i class="iconfont icon-ziyuan"></i></button>
                <input type="text" placeholder="搜索">
            </div>
            <div class="title">
                <span>工作台</span>
                <span>空间</span>
                <span>发现</span>
                <span>帮助</span>
                <span>反馈</span>
            </div>
            <div class="nav-right">
                <i class="iconfont icon-jiahao"></i>
                <i class="iconfont icon-ai253 "></i>
                <i class="iconfont icon-lingdang"></i>
                <div class="person">
                    <img src="images/my.jpg">
                    <i class="iconfont icon-xiala"></i>
                    <div class="drop-down">
                        <div class="list-top">
                            <p class="my-name">zhengcaiyi</p>
                            <p class="update">升级会员享受更多权益<span>立即升级</span></p>
                            <p class="gift">
                                <img src="images/礼物.png">
                                <span>邀请好友送上传流量</span>
                            </p>
                        </div>
                        <div class="icon">
                            <p><i class="iconfont icon-a1"></i><span>个人页面</span></p>
                            <p><i class="iconfont icon-shezhi"></i><span>账户设置</span></p>
                        </div>
                        <div class="icon">
                            <p><i class="iconfont icon-yingwen"></i><span>English</span></p>
                            <p><i class="iconfont icon-zhuomian"></i><span>下载桌面端</span></p>
                            <p><i class="iconfont icon-wendang"></i><span>帮助文档</span></p>
                        </div>
                        <div class="icon">
                            <p><i class="iconfont icon-shiyong"></i><span>在企业组织上使用语雀</span></p>
                        </div>
                        <div class="icon">
                            <p><i class="iconfont icon-zu"></i><span>退出登录</span></p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="content">
            <div class="content-left">
                <div class="left-top">
                    <img src="images/toux.png">
                    <p class="name">chengbenchao</p>
                    <p>懦夫从未启程，弱者死于途中，而我</p>
                    <p>们在路上。</p>
                    <button>取消关注</button>
                    <div class="attention">
                        <p>关注了</p>
                        <p class="num">8</p>
                    </div>
                    <div class="line"></div>
                    <div class="followers">
                        <p>关注者</p>
                        <p class="num">178</p>
                    </div>
                </div>
                <div class="location">
                    <p><i class="iconfont icon-zuobiao"></i><span>武汉</span></p>
                    <p><i class="iconfont icon-shangwutubiao-"><span>web前端工程师</span></i></p>
                </div>
                <div class="team">
                    <span>团队</span>
                    <p>尚未加入任何团队</p>
                </div>
            </div>
            <div class="content-right">
                <div class="content-nav">
                    <span class="konw">知识库</span>
                    <span>关注了</span>
                    <span>关注者</span>
                </div>
                <div class="type">
                    <div class="search2">
                        <button><i class="iconfont icon-ziyuan"></i></button>
                        <input type="text" placeholder="搜索知识库">
                    </div>
                    <span>类型：所有<i class="iconfont icon-xiala1"></i></span>
                </div>
                    <div class="nodes web">
                        <i class="iconfont icon-benzi"></i>
                        <span>前端</span>
                        <p class="describe">html-css-js-wechat学习笔记</p>
                        <p class="time">10-23 15:09</p>
                    </div>
                    <div class="nodes html">
                        <i class="iconfont icon-benzi"></i>
                        <span>HTML-CSS</span>
                        <p class="time">10-21 11:30</p>
                    </div>
                    <div class="nodes web">
                        <i class="iconfont icon-benzi"></i>
                        <span>node.js</span>
                        <p class="describe">node.js框架</p>
                        <p class="time">昨天 16:50</p>
                    </div>
                    <div class="nodes html">
                        <i class="iconfont icon-benzi"></i>
                        <span>小程序</span>
                        <p class="time">10-26 16:55</p>
                    </div>
                    <div class="nodes html">
                        <i class="iconfont icon-benzi"></i>
                        <span>web配置项</span>
                        <p class="time">10-16 14:55</p>
                    </div>
                    <div class="nodes html">
                        <i class="iconfont icon-benzi"></i>
                        <span>vue教程</span>
                        <p class="time">10-03 18:59</p>
                    </div>
                    <div class="nodes web">
                        <i class="iconfont icon-benzi"></i>
                        <span>python</span>
                        <p class="describe">python教程</p>
                        <p class="time">09-30 09:24</p>
                    </div>
                    <div class="nodes html">
                        <i class="iconfont icon-benzi"></i>
                        <span>React</span>
                        <p class="time">05-10 10:57</p>
                    </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-logo">
            <span class="iconfont icon-yuquemianlogo"></span>
            <span>语雀</span>
        </div>
        <div class="line2"></div>
        <div class="footer-serve">
            <a href="#">关于语雀</a>
            <a href="#">使用帮助</a>
            <a href="#">数据安全</a>
            <a href="#">服务协议</a>
            <span>|</span>
            <a href="#">English</a>
        </div>
    </div>

</body>
</html>